今天介紹使用一種叫做UIBezierPath的描繪筆劃路徑工具,其會把該路徑指派給CAShapeLayer來顯示在UIView上,而UIView與Layer之間的觀念大約如下:
UIView必須放在CALayer上,所以當UIView被創建在ViewController上時,同時也會自動建立一個CALayer
首先先初始化一個UIBezierPath,還有一個要來被賦予路徑的CAShapeLayer
let path = UIBezierPath()
let layer = CAShapeLayer()
再來我們要來使用畫筆來畫出線(也就是path),想像畫畫的時候會在想畫的地方先下筆接觸畫紙(還沒有畫的動作),這個動作在UIBezierPath裡面有個函數叫move,他可以帶入一個CGPoint表示下筆的位置,我們這裡假設座標(100,100)
path.move(to: CGPoint(x: 100, y: 100))
再來我們要拖拉畫筆到想要的位置,這樣就能畫出一條直線,拖拉的這個動作使用addLine,這裡假設要把畫筆拖至(100,200)
path.addLine(to: CGPoint(x: 100, y: 200))
到這裡筆畫路線就已經繪製完畢,但是這時候如果run了程式碼會發現什麼都沒有,因為我們繪製完的路線並沒有一個圖層讓他顯示出來,這個時候我們要用之前新增的圖層來存放繪製完成的直線,也就是像這樣,把繪製好的Path指派給Layer的Path,且Layer要的Path是CGPath的型態所以我們需要轉換
再來我們要改變圖層畫筆畫出來的顏色,因為預設是透明,所以就算畫完了也看不到,這個顏色屬性叫做strokeColor,這邊假設給紅色但是跟上面的Path一樣,Layer的顏色要求的是CGColor我們這邊也要做轉型,給完顏色後就可以把這個Layer加入到主畫面的ViewController上的View
layer.path = path.cgPath
layer.strokeColor = UIColor.red.cgColor
self.view.layer.addSublayer(layer)
接著介紹如何畫圓:
我們先宣告一個點當作圓心,緊接著呼叫畫圓的方法addArc,半徑先設為50,然後因為圓是一個有面積的圖形,所以我們要給他中間填滿的顏色,在Layer裡面的方法叫做fillColor,給定顏色的方式跟上面畫筆顏色也是一樣的,完成後程式碼如下
let layer = CAShapeLayer()
let path = UIBezierPath()
let center = CGPoint(x: 100, y: 100)
path.move(to: CGPoint(x: 100, y: 100))
path.addArc(withCenter: center, radius: 50, startAngle: 0, endAngle: 2 * CGFloat.pi, clockwise: true)
layer.path = path.cgPath
layer.strokeColor = UIColor.red.cgColor
layer.fillColor = UIColor.red.cgColor
self.view.layer.addSublayer(layer)